<template>
  <div class="statistics-container">
    <el-card>
      <div class="filter-header">
        <h2>人事数据统计</h2>
        <div class="filter-controls">
          <el-date-picker
              v-model="dateRange"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="YYYY-MM"
          />
          <el-button type="primary" @click="loadStatistics">查询</el-button>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409EFF;">
              <i class="el-icon-user-solid"></i>
            </div>
            <div class="stat-info">
              <h3>员工总数</h3>
              <p class="stat-value">{{ stats.totalEmployees }}</p>
              <p class="stat-change">较上月: <span :class="stats.employeeChange >= 0 ? 'positive' : 'negative'">
                {{ stats.employeeChange >= 0 ? '+' : '' }}{{ stats.employeeChange }}人
              </span></p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67C23A;">
              <i class="el-icon-s-custom"></i>
            </div>
            <div class="stat-info">
              <h3>本月入职</h3>
              <p class="stat-value">{{ stats.monthOnboard }}</p>
              <p class="stat-change">较上月: <span :class="stats.onboardChange >= 0 ? 'positive' : 'negative'">
                {{ stats.onboardChange >= 0 ? '+' : '' }}{{ stats.onboardChange }}人
              </span></p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #E6A23C;">
              <i class="el-icon-s-release"></i>
            </div>
            <div class="stat-info">
              <h3>本月离职</h3>
              <p class="stat-value">{{ stats.monthLeave }}</p>
              <p class="stat-change">较上月: <span :class="stats.leaveChange >= 0 ? 'positive' : 'negative'">
                {{ stats.leaveChange >= 0 ? '+' : '' }}{{ stats.leaveChange }}人
              </span></p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #F56C6C;">
              <i class="el-icon-s-opportunity"></i>
            </div>
            <div class="stat-info">
              <h3>岗位空缺</h3>
              <p class="stat-value">{{ stats.positionVacancy }}</p>
              <p class="stat-change">待招聘: {{ stats.pendingRecruitment }}个岗位</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <h3>月度入职离职趋势</h3>
          <div class="chart-container" ref="joinLeaveChart"></div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <h3>部门人员分布</h3>
          <div class="chart-container" ref="departmentChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card>
          <h3>年度人事变动分析</h3>
          <div class="chart-container" ref="yearlyTrendChart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts' // 修改为直接引入 echarts

export default {
  name: 'Statistics',
  setup() {
    const dateRange = ref(['2023-01', '2023-06'])
    const stats = reactive({
      totalEmployees: 1245,
      employeeChange: 15,
      monthOnboard: 28,
      onboardChange: 3,
      monthLeave: 12,
      leaveChange: -2,
      positionVacancy: 24,
      pendingRecruitment: 18
    })

    // 添加图表引用
    const joinLeaveChart = ref(null)
    const departmentChart = ref(null)
    const yearlyTrendChart = ref(null)

    const loadStatistics = () => {
      // ... 原有代码 ...
    }

    const initCharts = () => {
      // 初始化图表
      setTimeout(() => {
        // 月度入职离职趋势图
        if (joinLeaveChart.value) {
          const chart = echarts.init(joinLeaveChart.value)
          chart.setOption({
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['入职人数', '离职人数']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '入职人数',
                type: 'bar',
                data: [25, 28, 30, 35, 32, 40],
                itemStyle: {
                  color: '#67C23A'
                }
              },
              {
                name: '离职人数',
                type: 'bar',
                data: [15, 12, 10, 8, 10, 9],
                itemStyle: {
                  color: '#F56C6C'
                }
              }
            ]
          })
        }

        // 部门人员分布图
        if (departmentChart.value) {
          const chart = echarts.init(departmentChart.value)
          chart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              right: 10,
              top: 'center',
              data: ['技术部', '市场部', '销售部', '人力资源部', '财务部', '行政部']
            },
            series: [
              {
                name: '部门人员分布',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '18',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: 420, name: '技术部' },
                  { value: 280, name: '市场部' },
                  { value: 250, name: '销售部' },
                  { value: 120, name: '人力资源部' },
                  { value: 90, name: '财务部' },
                  { value: 80, name: '行政部' }
                ]
              }
            ]
          })
        }

        // 年度人事变动分析
        if (yearlyTrendChart.value) {
          const chart = echarts.init(yearlyTrendChart.value)
          chart.setOption({
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['入职', '离职', '调动']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '入职',
                type: 'line',
                data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
                smooth: true,
                lineStyle: {
                  color: '#67C23A',
                  width: 3
                }
              },
              {
                name: '离职',
                type: 'line',
                data: [85, 93, 90, 93, 129, 133, 140, 128, 110, 105, 120, 150],
                smooth: true,
                lineStyle: {
                  color: '#F56C6C',
                  width: 3
                }
              },
              {
                name: '调动',
                type: 'line',
                data: [60, 72, 71, 74, 90, 92, 110, 115, 95, 100, 105, 120],
                smooth: true,
                lineStyle: {
                  color: '#409EFF',
                  width: 3
                }
              }
            ]
          })
        }
      }, 500)
    }

    onMounted(() => {
      loadStatistics()
      // 确保 DOM 加载完成后初始化图表
      setTimeout(initCharts, 300)
    })

    return {
      dateRange,
      stats,
      joinLeaveChart,
      departmentChart,
      yearlyTrendChart,
      loadStatistics
    }
  }
}
</script>

<style scoped>
.statistics-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-controls {
  display: flex;
  gap: 10px;
}

.stats-row {
  margin: 20px 0;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 28px;
  color: white;
}

.stat-info h3 {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 5px 0;
  color: #333;
}

.stat-change {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.positive {
  color: #67C23A;
}

.negative {
  color: #F56C6C;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-container {
  height: 400px;
}

.chart {
  height: 100%;
  width: 100%;
}
</style>